﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旋转按钮</title>
    <style type="text/css">
        ul li {
            float: left;
            margin: 10px;
            list-style: none;
        }
        #box img { 
            transition: all 0.3s ease-in-out;
        }
        #box img:hover { 
            transform: rotate(-360deg) scale(1.5);
        }
    </style>
</head>
<body>
<h2>顺时针旋转360度放大1.2倍</h2>
<ul id="box">
    <li><a href="#"><img src="images/rss.png" /></a></li>
    <li><a href="#"><img src="images/delicious.png" /></a></li>
    <li><a href="#"><img src="images/facebook.png" /></a></li>
    <li><a href="#"><img src="images/twitter.png"/></a></li>
    <li><a href="#"><img src="images/yahoo.png" /></a></li>
</ul>

</body>
</html>